import { Component, OnInit } from "@angular/core";
import { DatePipe } from "@angular/common";
import { AxiosService } from "../../axios.service";
import { ExceljsService } from "./../../myService/exceljs.service";
// import * as FileSaver from 'file-saver';
// import * as XLSX from 'xlsx';
// import * as moment from 'moment';
import echarts from "echarts";
import { time } from "console";

@Component({
  selector: "app-baobiao",
  templateUrl: "./baobiao.component.html",
  styleUrls: ["./baobiao.component.scss"],
  providers: [DatePipe],
})
export class BaobiaoComponent implements OnInit {
  // 人工工时
  timeList = []; // 人工工时
  dowmTimeList = []; // 人工工时 下载

  // 总检
  listOfData = []; // 总检
  zongjianList = [];//明细
  downlistOfData = []; // 总检 下载
  downZongjianList = [];//明细 下载
  X = []; // x轴日期
  Y1 = []; // y轴DPPM
  Y2 = []; // y轴良率
  base64;
  exportlist = []; // 下载


  // 品检
  pinjianList = []; // 品检
  PinjianDetail = []; // 明细
  pX = []; // x轴日期
  pY1 = []; // y轴良率
  pY2 = []; // y轴DPPM
  downPinjianList = []; // 品检 下载
  downPinjianDetail = []; // 品检 明细
  Pbase64;
  exportlist1 = []; // 下载

  // delay原因分析
  delayList = []; // delay
  exportlistDely = [];
  exportlist4 = [];
  sheet1List = [];
  downsheetList = [];
  sheetdata = {};
  reportData = {};

  // 呆滞料
  daizhiliaoList = [];
  daizhiliaoDownList = [];
  orderList = [];
  downOrderList = [];
  downList = [];
  daizhiX = [];
  daizhiY1 = [];
  daizhiY2 = [];
  daizhiY3 = [];
  daizhiY4 = [];
  daizhiTarget = 15 + "%";
  daizhiTargetY = 15;
  echartsLoading = false;
  base64Daizhiliao;

  // OTD
  OTDList = [];
  downOTDList = [];
  exportlist2 = [];
  OTDbase64;
  otdX = [];
  otdY1 = [];
  otdY2 = [];
  Target = 95 + "%";
  TargetY = 95;

  // 净利润
  benefitList = [];
  downBenefitList = [];
  exportlist3 = [];
  benefitX = [];
  yunyingY = [];
  wuliaoY = [];
  zhichuY = [];
  yingyeeY = [];
  chunlirunY = [];
  benefitiBase64;
  benefitSheet2 = [];
  benefitSheet3 = [];
  downBenefitSheet2 = [];
  downBenefitSheet3 = [];
  benefitsheet3 = {};

  // 各厂效益
  factory = [];
  exportList4 = [];
  xiaoyiSheet2 = [];
  downXiaoyiSheet2 = [];
  xiaoyiX = [];
  WAKS6A = []; // WAKS(6A)
  WAKS6B = []; // WAKS(6B)
  WAKSP1 = []; // WAKS(P1)
  WAKSP5 = []; // WAKS(P5)
  WEKSP3 = []; // WEKS(P3)
  WAKSSite = []; // WAKS(Site)
  xiaoyiBase64;

  startValue; // 人工工時開始時間
  endValue; // 人工工時結束時間
  startValue1; // 治具校驗(總檢) 开始时间
  endValue1; // 治具校驗(總檢) 结束时间
  startValue2; // 治具校驗(品質檢驗) 开始时间
  endValue2; // 治具校驗(品質檢驗) 结束时间
  startValue3; // Delay原因分析 开始时间
  endValue3; // Delay原因分析 结束时间

  constructor(
    public axios: AxiosService,
    private datePipe: DatePipe,
    public excel: ExceljsService
  ) { }

  ngOnInit(): void { }

  // 人工工时报表下载
  download() {
    // 下载接口 （后台记录下载次数等信息）
    this.axios
      .axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    // 请求下载的数据
    // debugger
    this.axios
      .axiosPost("QueryBaobiaoGongshi", {
        starttime: this.startValue,
        endtime: this.endValue,
      })
      .then((data) => {
        console.log(data);
        this.timeList = data["order"];
        console.log(this.timeList);
        if (this.timeList.length == 0) {
          alert("暫無數據");
        } else {
          this.dowmTimeList = [];
          this.timeList.forEach((row: any) => {
            this.dowmTimeList.push(Object.values(row));
          });
          let head = [
            "結單日期",
            "單據號",
            "治具名稱",
            "治具數量",
            "申請人",
            "廠別",
            "費用charge",
            "TTL工時",
            "材料費用",
            "單價",
            "總價",
          ];
          let reportData = {
            title: "人工工時比例",
            data: this.dowmTimeList,
            headers: head,
          };
          this.excel.exportExcel(reportData);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    this.timeList = [];
  }

  // 治具校驗(總檢)下载
  download1() {
    // debugger
    // 下载接口 （后台记录下载次数等信息）
    console.log(this.startValue1, this.endValue1)
    this.axios.axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    // 请求下载的数据
    this.axios.axiosPost("QueryBaobiaoZongjian", {
      starttime: this.startValue1,
      endtime: this.endValue1,
    })
      .then((data) => {
        console.log(data);
        this.listOfData = data["order"];
        this.zongjianList = data["list"];
        if (this.listOfData.length == 0) {
          alert("暫無數據");
        } else {
          // 排序
          this.listOfData.sort((a, b) => {
            return a.day > b.day ? 1 : -1;
          });
          for (let i = 0; i < this.listOfData.length; i++) {
            // 總數
            this.listOfData[i].total = this.listOfData[i].ok + this.listOfData[i].ng;
            // 不良數
            this.listOfData[i].ng = this.listOfData[i].ng
            // 不良率
            this.listOfData[i].nooklv = this.listOfData[i].total != 0 ? this.listOfData[i].ng != 0 ? ((this.listOfData[i].ng / this.listOfData[i].total) * 100).toFixed(1) +
              "%" : 100 : 0;
            // 良率
            this.listOfData[i].okRate1 = this.listOfData[i].total != 0 ? this.listOfData[i].ng != 0 ? ((1 - this.listOfData[i].ng / this.listOfData[i].total) * 100).toFixed(1) : 100 : 0;
            this.listOfData[i].okRate = `${this.listOfData[i].okRate1}%`;
            // DPPM 不良數/總數*1000000
            this.listOfData[i].Dppm =
              this.listOfData[i].ng != 0
                ? (this.listOfData[i].ng / this.listOfData[i].total) * 1000000
                : 0;
            this.listOfData[i].Dppm = parseInt(this.listOfData[i].Dppm);
          }
          // 下载报表
          let time = []; // 日期
          let allnumber = [] //總數 leo
          let nooknumber = []// 不良數 leo
          let nooklvnumber = []//不良率 leo
          let rateOK = []; // 良率
          let DPPM = []; // DPPM
          let no = []; // 不带%的良率
          time.push("");
          allnumber.push("總數")
          nooknumber.push("不良數")
          nooklvnumber.push("不良率")
          rateOK.push("良率");
          DPPM.push("DPPM");
          no.push("不带%");
          for (let i = 0; i < this.listOfData.length; i++) {
            time.push(this.listOfData[i].day.slice(5, 10));
            allnumber.push(this.listOfData[i].total)
            nooknumber.push(this.listOfData[i].ng)
            nooklvnumber.push(this.listOfData[i].nooklv)
            rateOK.push(this.listOfData[i].okRate);
            DPPM.push(this.listOfData[i].Dppm);
            no.push(this.listOfData[i].okRate1);
          }
          this.X = time.slice(1);
          this.Y1 = no.slice(1);
          this.Y2 = DPPM.slice(1);
          this.exportlist.push(time);
          this.exportlist.push(allnumber);
          this.exportlist.push(nooknumber);
          this.exportlist.push(nooklvnumber)
          this.exportlist.push(rateOK);
          this.exportlist.push(DPPM);
          console.log(this.exportlist);
          // 获取base64
          const chart = echarts.init(document.getElementById("zongjian"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            legend: {
              data: ["DPPM", "良率"],
              top: 10,
              itemGap: 80,
              textStyle: {
                // color: '#000000',
                fontSize: 16,
              },
            },
            grid: {
              left: "0.5%",
              right: "1%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.X,
                axisPointer: {
                  type: "shadow",
                },
                axisLabel: {
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  formatter: "{value}",
                  textStyle: { fontSize: 18 },
                },
              },
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} %",
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            animation: false,
            series: [
              {
                name: "DPPM",
                type: "bar",
                stack: "成本",
                emphasis: {
                  focus: "series",
                },
                data: this.Y2,
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                data: this.Y1,
                label: {
                  show: true, // 柱头数字
                  position: "top",
                  formatter: "{c}%", //显示百分号
                  textStyle: {
                    fontSize: "16",
                  },
                },
              },
            ],
          };
          chart.setOption(option);
          let img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.base64 = img.src;
          this.downlistOfData = [];
          this.exportlist.forEach((row: any) => {
            this.downlistOfData.push(Object.values(row));
          });
          let reportData = {
            title: "治具校驗(總檢)",
            data: this.downlistOfData,
          };
          // sheet2
          this.downZongjianList = [];
          this.zongjianList.forEach((row: any) => {
            this.downZongjianList.push(Object.values(row));
          });
          let head = [
            "工聯單號",
            "治具名稱",
            "數量",
            "19碼",
            "總檢提醒",
            "送檢時間",
            "OK數",
            "NG數",
            "工作時間統計",
            "治具交期",
            "總檢備註",
          ];
          let listData = {
            title: "總檢明細",
            data: this.downZongjianList,
            headers: head,
          };
          this.excel.exportExcel2(
            "治具校驗(總檢)",
            reportData,
            this.base64,
            listData
          );

          this.X = [];
          this.Y1 = [];
          this.Y2 = [];
        }
      });
    this.exportlist = [];
  }
  // 绘制echarts
  showEchartsZongjian() {
    console.log(this.startValue1, this.endValue1)
    this.axios.axiosPost("QueryBaobiaoZongjian", { starttime: this.startValue1, endtime: this.endValue1, }).then((data) => {
      console.log(data);
      this.listOfData = data["order"];
      if (this.listOfData.length == 0) {
        alert("暫無數據");
      } else {
        // 排序
        this.listOfData.sort((a, b) => {
          return a.day > b.day ? 1 : -1;
        });
        for (let i = 0; i < this.listOfData.length; i++) {
          // 總數
          this.listOfData[i].total = this.listOfData[i].ok + this.listOfData[i].ng;
          // 良率
          this.listOfData[i].okRate1 = this.listOfData[i].total != 0 ? this.listOfData[i].ng != 0 ? ((1 - this.listOfData[i].ng / this.listOfData[i].total) * 100).toFixed(1) : 100 : 0;
          this.listOfData[i].okRate = `${this.listOfData[i].okRate1}%`;
          // DPPM 不良數/總數*1000000
          this.listOfData[i].Dppm = this.listOfData[i].ng != 0 ? (this.listOfData[i].ng / this.listOfData[i].total) * 1000000 : 0;
          this.listOfData[i].Dppm = parseInt(this.listOfData[i].Dppm);
        }
        console.log(this.listOfData);
        // 下载报表
        let time = []; // 日期
        let rateOK = []; // 良率
        let DPPM = []; // DPPM
        let no = []; // 不带%的良率
        time.push("");
        rateOK.push("良率");
        DPPM.push("DPPM");
        no.push("不带%");
        for (let i = 0; i < this.listOfData.length; i++) {
          time.push(this.listOfData[i].day.slice(5, 10));
          rateOK.push(this.listOfData[i].okRate);
          DPPM.push(this.listOfData[i].Dppm);
          no.push(this.listOfData[i].okRate1);
        }
        this.X = time.slice(1);
        this.Y1 = no.slice(1);
        this.Y2 = DPPM.slice(1);
        this.exportlist.push(time);
        this.exportlist.push(rateOK);
        this.exportlist.push(DPPM);
        console.log(this.exportlist);
        let a;
        a = document.getElementById("zongjianEchart").style.display = "block";
        const chart = echarts.init(document.getElementById("zongjian"));
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          legend: {
            data: ["DPPM", "良率"],
            top: 10,
            itemGap: 80,
            textStyle: {
              // color: '#000000',
              fontSize: 16,
            },
          },
          grid: {
            left: "0.5%",
            right: "1%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.X,
              axisPointer: {
                type: "shadow",
              },
              axisLabel: {
                textStyle: { fontSize: 18 },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                formatter: "{value}",
                textStyle: { fontSize: 18 },
              },
            },
            {
              type: "value",
              axisLabel: {
                formatter: "{value} %",
                textStyle: { fontSize: 18 },
              },
            },
          ],
          animation: false,
          series: [
            {
              name: "DPPM",
              type: "bar",
              stack: "成本",
              emphasis: {
                focus: "series",
              },
              data: this.Y2,
            },
            {
              name: "良率",
              type: "line",
              yAxisIndex: 1,
              data: this.Y1,
              label: {
                show: true, // 柱头数字
                position: "top",
                formatter: "{c}%", //显示百分号
                textStyle: {
                  fontSize: "16",
                },
              },
            },
          ],
        };
        chart.setOption(option);
        let img = new Image();
        img.src = chart.getDataURL({
          backgroundColor: "#FFFFFF",
        });
        this.base64 = img.src;
        this.X = [];
        this.Y1 = [];
        this.Y2 = [];
      }
      this.startValue1 = "";
      this.endValue1 = "";
    });
  }
  noshowEchartsZongjian() {
    let a;
    a = document.getElementById("zongjianEchart").style.display = "none";
  }

  // 治具校驗(品質檢驗)下载
  download2() {
    // 下载接口 （后台记录下载次数等信息）
    this.axios.axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    // 请求下载的数据
    this.axios.axiosPost("QueryBaobiaoPinjian", {
      starttime: this.startValue2,
      endtime: this.endValue2,
    })
      .then((data) => {
        console.log(data);
        this.pinjianList = data["order"];
        this.PinjianDetail = data["list"]
        if (this.pinjianList.length == 0) {
          alert("暫無數據");
        } else {
          // 排序
          this.pinjianList.sort((a, b) => {
            return a.day > b.day ? 1 : -1;
          });
          console.log(this.pinjianList)
          for (let i = 0; i < this.pinjianList.length; i++) {
            // 總數
            this.pinjianList[i].total = this.pinjianList[i].ok + this.pinjianList[i].ng;
            // 不良數  leo 
            this.pinjianList[i].ng = this.pinjianList[i].ng;
            // 不良率  leo
            this.pinjianList[i].onok = this.pinjianList[i].total != 0 ? (100 - Number(((this.pinjianList[i].ok / this.pinjianList[i].total) * 100).toFixed(1))).toFixed(1) + '%' : 0 + '%';
            // 良率
            this.pinjianList[i].okRate = this.pinjianList[i].total != 0 ? ((this.pinjianList[i].ok / this.pinjianList[i].total) * 100).toFixed(1) + '%' : 0 + '%';
            // DPPM
            this.pinjianList[i].Dppm = this.pinjianList[i].total != 0 ? (this.pinjianList[i].ng / this.pinjianList[i].total * 1000000).toFixed(1) : 0;
            // 良数 no
            this.pinjianList[i].no = this.pinjianList[i].total != 0 ? ((this.pinjianList[i].ok / this.pinjianList[i].total) * 100).toFixed(1) : 0;
          }
          console.log(this.pinjianList);
          // 下载报表
          let time = []; // 日期
          let allnumber = []// 總數  leo
          let nooknumber = []//不良數  leo
          let nooklvnumber = []//不良率 leo
          let rateOK = []; // 良率
          let DPPM = []; // DPPM
          let no = []; // 不带%的良率
          time.push("日期");
          allnumber.push("總數")//leo
          nooknumber.push("不良數")//leo
          nooklvnumber.push("不良率")//leo
          rateOK.push("良率");
          DPPM.push("DPPM");
          no.push("不带%");
          for (let i = 0; i < this.pinjianList.length; i++) {
            time.push(this.pinjianList[i].day.slice(5, 10));
            allnumber.push(this.pinjianList[i].total)//leo
            nooknumber.push(this.pinjianList[i].ng)//leo
            nooklvnumber.push(this.pinjianList[i].onok)//leo
            rateOK.push(this.pinjianList[i].okRate);
            DPPM.push(this.pinjianList[i].Dppm);
            no.push(this.pinjianList[i].no);
          }
          this.pX = time.slice(1);
          this.pY1 = no.slice(1);
          this.pY2 = DPPM.slice(1);

          this.exportlist1.push(time);
          this.exportlist1.push(allnumber)//leo
          this.exportlist1.push(nooknumber)//leo
          this.exportlist1.push(nooklvnumber)//leo
          this.exportlist1.push(rateOK);
          this.exportlist1.push(DPPM);
          console.log(this.exportlist1);

          // 图表
          const chart = echarts.init(document.getElementById("pinjian"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            grid: {
              borderColor: "#30494D",
              y2: 70,
            },
            legend: {
              data: ["DPPM", "良率"],
              bottom: 0,
              itemGap: 80,
              textStyle: {
                color: "#000000",
                fontSize: 16,
              },
            },
            xAxis: [
              {
                type: "category",
                data: this.pX,
                axisLine: {
                  lineStyle: {
                    color: "#000000",
                  },
                },
                splitLine: {
                  lineStyle: {
                    // 使用深浅的间隔色
                    color: ["#000000"],
                    type: "dotted",
                  },
                },
                // axisTick: {
                // 刻度线 
                //   show: false, 
                // 去掉刻度线 
                // },
                axisLabel: {
                  //  字体颜色
                  show: true,
                  textStyle: { color: "#000000", fontSize: 16 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                min: 0,
                // max: 250000, 
                // interval: 25000,
                axisLabel: {
                  formatter: "{value} ",
                  show: true,
                  textStyle: { color: "#000000", fontSize: 16 },
                },
                axisLine: {
                  lineStyle: {
                    color: "#000000",
                  },
                  show: true,
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: ["#000000"],
                    width: 1,
                    type: "solid",
                  },
                },
                // 刻度线 
                // axisTick: { 
                //   show: false 
                // }
              },
              {
                type: "value",
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                  formatter: "{value} %",
                  show: true,
                  textStyle: { color: "#000000", fontSize: 16 },
                },
                axisLine: {
                  lineStyle: {
                    color: "#000000",
                  },
                  show: true,
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: ["#000000"],
                    width: 1,
                    type: "solid",
                  },
                },
                // axisTick: { 
                // 隐藏刻度 
                //   show: false 
                // },
              },
            ],
            series: [
              {
                name: "DPPM",
                type: "bar",
                data: this.pY2,
                barWidth: 40,
                itemStyle: {
                  color: "#DC143C",
                },
                label: {
                  show: false, // 柱头数字
                  position: "top",
                  textStyle: {
                    fontSize: "16",
                  },
                },
                animation: false,
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                data: this.pY1,
                itemStyle: {
                  color: "#0000FF",
                },
                label: {
                  show: true, // 柱头数字
                  position: "top",
                  textStyle: {
                    fontSize: "16",
                  },
                  formatter: "{c}%",
                },
                symbolSize: 6,
                // 设置折线圆点大小
                lineStyle: {
                  type: "solid",
                },
                animation: false,
              },

            ],
          };
          chart.setOption(option);
          var img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.Pbase64 = img.src;

          // 获取base64
          this.downPinjianList = [];
          this.exportlist1.forEach((row: any) => {
            this.downPinjianList.push(Object.values(row));
          });
          let reportData = {
            title: "治具校驗(品質檢驗)",
            data: this.downPinjianList,
          };

          // sheet2明细
          this.downPinjianDetail = [];
          this.PinjianDetail.forEach((row: any) => {
            this.downPinjianDetail.push(Object.values(row));
          });

          let head = ["工聯單號", "治具名稱", "箱號", "送檢時間", "工作時間統計", "NG數", "OK數", "品檢備註", "治具交期"]
          let sheetData = {
            title: "明細説明",
            data: this.downPinjianDetail,
            headers: head,
          };
          this.excel.exportExcel3(reportData, this.Pbase64, sheetData);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    this.exportlist1 = [];
  }
  // 绘制echarts
  showEchartsPinjian() {
    this.axios.axiosPost("QueryBaobiaoPinjian", {
      starttime: this.startValue2,
      endtime: this.endValue2,
    })
      .then((data) => {
        console.log(data);
        // console.log(data["list"]);
        this.pinjianList = data["order"];
        this.PinjianDetail = data["list"]
        if (this.pinjianList.length == 0) {
          alert("暫無數據");
        } else {
          // 排序
          this.pinjianList.sort((a, b) => {
            return a.day > b.day ? 1 : -1;
          });
          for (let i = 0; i < this.pinjianList.length; i++) {
            // 總數
            this.pinjianList[i].total = this.pinjianList[i].ok + this.pinjianList[i].ng; // 不良率
            // 良率
            this.pinjianList[i].okRate = this.pinjianList[i].total != 0 ? ((this.pinjianList[i].ok / this.pinjianList[i].total) * 100).toFixed(1) + '%' : 0;
            // DPPM
            this.pinjianList[i].Dppm = this.pinjianList[i].total != 0 ? (this.pinjianList[i].ng / this.pinjianList[i].total * 1000000).toFixed(1) : 0;
            // 良数 no
            this.pinjianList[i].no = this.pinjianList[i].total != 0 ? ((this.pinjianList[i].ok / this.pinjianList[i].total) * 100).toFixed(1) : 0;
          }
          // 下载报表
          let time = []; // 日期
          let rateOK = []; // 良率
          let DPPM = []; // DPPM
          let no = []; // 不带%的良率
          time.push("");
          rateOK.push("良率");
          DPPM.push("DPPM");
          no.push("不带%");
          for (let i = 0; i < this.pinjianList.length; i++) {
            time.push(this.pinjianList[i].day.slice(5, 10));
            rateOK.push(this.pinjianList[i].okRate);
            DPPM.push(this.pinjianList[i].Dppm);
            no.push(this.pinjianList[i].no);
          }
          this.pX = time.slice(1);
          this.pY1 = no.slice(1);
          this.pY2 = DPPM.slice(1);
          this.exportlist1.push(time);
          this.exportlist1.push(rateOK);
          this.exportlist1.push(DPPM);
          console.log(this.exportlist1);

          let a;
          a = document.getElementById("pinjianEchart").style.display = "block";
          // 图表
          const chart = echarts.init(document.getElementById("pinjian"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            legend: {
              data: ["DPPM", "良率"],
              top: 10,
              itemGap: 80,
              textStyle: {
                // color: '#000000',
                fontSize: 16,
              },
            },
            grid: {
              left: "0.5%",
              right: "1%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.pX,
                axisPointer: {
                  type: "shadow",
                },
                axisLabel: {
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  formatter: "{value}",
                  textStyle: { fontSize: 18 },
                },
              },
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} %",
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            animation: false,
            series: [
              {
                name: "DPPM",
                type: "bar",
                stack: "成本",
                emphasis: {
                  focus: "series",
                },
                data: this.pY2,
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                data: this.pY1,
                label: {
                  show: true, // 柱头数字
                  position: "top",
                  formatter: "{c}%", //显示百分号
                  textStyle: {
                    fontSize: "16",
                  },
                },
              },
            ],
          };
          chart.setOption(option);
          var img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.Pbase64 = img.src;
          this.pX = [];
          this.pY1 = [];
          this.pY2 = [];

        }
      })
    // this.startValue2 = "",
    // this.endValue2 = ""
  }
  noshowEchartsPinjian() {
    let a;
    a = document.getElementById("pinjianEchart").style.display = "none";
  }

  // 呆滞料报表下载
  download4() {
    let time = [];
    let kucun_cailiao = [];
    let kucun_peijian = [];
    let kucun_daoju = [];
    let kucun_haocai = [];
    let kucun_shebeibeijian = [];
    let kucunje = [];
    let daizhi_cailiao = [];
    let daizhi_peijian = [];
    let daizhi_daoju = [];
    let daizhi_haocai = [];
    let daizhi_shebeibeijian = [];
    let kucun_qita = [];
    let daizhi_qita = [];


    let daizhi = [];
    let daizhiRate = [];
    let target = [];
    time.push("");
    kucun_cailiao.push("(庫)材料")
    kucun_peijian.push("(庫)配件")
    kucun_daoju.push("(庫)刀具")
    kucun_haocai.push("(庫)耗材")
    kucun_shebeibeijian.push("(庫)設備備件")
    kucun_qita.push("(庫)其他")
    kucunje.push("庫存金額");
    daizhi_cailiao.push("(呆)材料")
    daizhi_peijian.push("(呆)配件")
    daizhi_daoju.push("(呆)刀具")
    daizhi_haocai.push("(呆)耗材")
    daizhi_shebeibeijian.push("(呆)設備備件")
    daizhi_qita.push("(呆)其他")
    daizhi.push("呆滯");
    daizhiRate.push("呆滯占比");
    target.push("目標");
    // 下载接口 （后台记录下载次数等信息）
    this.axios.axiosPost("AddDownloadCount").then((data) => { console.log(data); }).catch((err) => {
      console.log(err);
    });
    // 请求下载的数据
    this.axios
      .axiosPost("QueryBaobiaoDaizhiliao")
      .then((data) => {
        console.log(data);
        this.orderList = data["order"];
        this.daizhiliaoList = data["list"];
        console.log(this.orderList);
        if (this.orderList.length == 0) {
          alert("暫無數據");
        } else {
          this.daizhiX = [];
          this.daizhiY1 = [];
          this.daizhiY2 = [];
          this.daizhiY3 = [];
          this.daizhiY4 = [];
          for (let i = 0; i < this.orderList.length; i++) {
            time.push(this.orderList[i].month_name);
            kucun_cailiao.push(this.orderList[i].kucun_cailiao)
            kucun_peijian.push(this.orderList[i].kucun_peijian)
            kucun_daoju.push(this.orderList[i].kucun_daoju)
            kucun_haocai.push(this.orderList[i].kucun_haocai)
            kucun_shebeibeijian.push(this.orderList[i].kucun_shebeibeijian)
            kucun_qita.push(this.orderList[i].kucun_qita)

            kucunje.push(this.orderList[i].kucunjine);

            daizhi_cailiao.push(this.orderList[i].daizhi_cailiao)
            daizhi_peijian.push(this.orderList[i].daizhi_peijian)
            daizhi_daoju.push(this.orderList[i].daizhi_daoju)
            daizhi_haocai.push(this.orderList[i].daizhi_haocai)
            daizhi_shebeibeijian.push(this.orderList[i].daizhi_shebeibeijian)
            daizhi_qita.push(this.orderList[i].daizhi_qita)


            daizhi.push(this.orderList[i].daizhi);
            daizhiRate.push(this.orderList[i].daizhi == 0 ? 0 + "%" : ((Number(this.orderList[i].daizhi) / Number(this.orderList[i].kucunjine)) * 100).toFixed(2) + "%");
            target.push(this.daizhiTarget);

            this.daizhiX.push(this.orderList[i].month_name);
            this.daizhiY1.push(this.orderList[i].kucunjine);
            this.daizhiY2.push(this.orderList[i].daizhi);
            this.daizhiY3.push(
              this.orderList[i].daizhi == 0
                ? 0
                : (
                  (Number(this.orderList[i].daizhi) /
                    Number(this.orderList[i].kucunjine)) *
                  100
                ).toFixed(2)
            );
            this.daizhiY4.push(this.daizhiTargetY);
          }
          this.downOrderList.push(time);
          this.downOrderList.push(kucun_cailiao);
          this.downOrderList.push(kucun_peijian);
          this.downOrderList.push(kucun_daoju);
          this.downOrderList.push(kucun_haocai);
          this.downOrderList.push(kucun_shebeibeijian);
          this.downOrderList.push(kucun_qita);


          this.downOrderList.push(kucunje);

          this.downOrderList.push(daizhi_cailiao);
          this.downOrderList.push(daizhi_peijian);
          this.downOrderList.push(daizhi_daoju);
          this.downOrderList.push(daizhi_haocai);
          this.downOrderList.push(daizhi_shebeibeijian);
          this.downOrderList.push(daizhi_qita)
          this.downOrderList.push(daizhi);
          this.downOrderList.push(daizhiRate);
          this.downOrderList.push(target);
          console.log(this.downOrderList);
          this.downList = [];
          this.downOrderList.forEach((row: any) => {
            this.downList.push(Object.values(row));
          });
          let reportOrderData = {
            title: "呆滯料",
            data: this.downList,
          };
          this.daizhiliaoDownList = [];
          this.daizhiliaoList.forEach((row: any) => {
            this.daizhiliaoDownList.push(Object.values(row));
          });
          let head = [
            "PR NO",
            "PO NO",
            "序號",
            "料號",
            "數量",
            "含稅單價",
            "廠商",
            "幣別",
            "卡口核放單號",
            "採購原因",
            "入庫時間",
            "名稱",
            "類別",
            "未稅總價",
            "月份",
          ];
          let reportData = {
            title: "呆滯料",
            data: this.daizhiliaoDownList,
            headers: head,
          };
          if (this.daizhiX.length != 0 && this.daizhiY1.length != 0) {
            console.log(this.daizhiY1);
            const chart = echarts.init(document.getElementById("daizhi"));
            const option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  crossStyle: {
                    color: "#999",
                  },
                },
              },
              legend: {
                data: ["庫存金額", "呆滯占比", "呆滯", "目標"],
                top: 20,
                itemGap: 80,
                textStyle: {
                  // color: '#000000',
                  fontSize: 16,
                },
              },
              grid: {
                left: "0.5%",
                right: "1%",
                bottom: "3%",
                containLabel: true,
              },
              xAxis: [
                {
                  type: "category",
                  data: this.daizhiX,
                  axisPointer: {
                    type: "shadow",
                  },
                  axisLabel: {
                    textStyle: { fontSize: 18 },
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                  axisLabel: {
                    formatter: "{value}",
                    textStyle: { fontSize: 18 },
                  },
                },
                {
                  type: "value",
                  axisLabel: {
                    formatter: "{value} %",
                    textStyle: { fontSize: 18 },
                  },
                  splitLine: {
                    show: false,
                  },
                },
              ],
              animation: false,
              series: [
                {
                  name: "庫存金額",
                  type: "bar",
                  data: this.daizhiY1,
                },
                {
                  name: "呆滯",
                  type: "bar",
                  data: this.daizhiY2,
                },
                {
                  name: "呆滯占比",
                  type: "line",
                  yAxisIndex: 1,
                  data: this.daizhiY3,
                  label: {
                    show: true, // 柱头数字
                    position: "top",
                    formatter: "{c}%", //显示百分号
                    textStyle: {
                      fontSize: "16",
                    },
                  },
                },
                {
                  name: "目標",
                  type: "line",
                  yAxisIndex: 1,
                  data: this.daizhiY4,
                  markLine: {
                    data: [{ type: "average", name: "平均值" }],
                  },
                },
              ],
            };
            console.log(this.daizhiY1);
            chart.setOption(option);
            let img = new Image();
            img.src = chart.getDataURL({
              backgroundColor: "#FFFFFF",
            });
            this.base64Daizhiliao = img.src;
            console.log(this.base64Daizhiliao);
          }
          this.excel.exportExcel4(
            reportOrderData,
            reportData,
            this.base64Daizhiliao
          );
          this.daizhiliaoList = [];
          this.downOrderList = [];
          this.daizhiX = [];
          this.daizhiY1 = [];
          this.daizhiY2 = [];
          this.daizhiY3 = [];
          this.daizhiY4 = [];
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  showEchartsDaizhi(daizhiliao) {
    this.echartsLoading = true;
    if (daizhiliao) {
      let a;
      a = document.getElementById("daizhiEchart").style.display = "block";
    }
    this.axios.axiosPost("QueryBaobiaoDaizhiliao").then((data) => {
      this.echartsLoading = false;
      console.log(data);
      this.orderList = data["order"];
      console.log(this.orderList);
      for (let i = 0; i < this.orderList.length; i++) {
        this.daizhiX.push(this.orderList[i].month_name);
        this.daizhiY1.push(this.orderList[i].kucunjine);
        this.daizhiY2.push(this.orderList[i].daizhi);
        this.daizhiY3.push(
          this.orderList[i].daizhi == 0
            ? 0
            : (
              (Number(this.orderList[i].daizhi) /
                Number(this.orderList[i].kucunjine)) *
              100
            ).toFixed(2)
        );
        this.daizhiY4.push(this.daizhiTargetY);
      }
      console.log(this.daizhiY1.length);
      if (this.daizhiX.length != 0 && this.daizhiY1.length != 0) {
        console.log(this.daizhiY1);
        const chart = echarts.init(document.getElementById("daizhi"));
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          legend: {
            data: ["庫存金額", "呆滯占比", "呆滯", "目標"],
            top: 20,
            itemGap: 80,
            textStyle: {
              // color: '#000000',
              fontSize: 16,
            },
          },
          grid: {
            left: "0.5%",
            right: "1%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.daizhiX,
              axisPointer: {
                type: "shadow",
              },
              axisLabel: {
                textStyle: { fontSize: 18 },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                formatter: "{value}",
                textStyle: { fontSize: 18 },
              },
            },
            {
              type: "value",
              axisLabel: {
                formatter: "{value} %",
                textStyle: { fontSize: 18 },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          animation: false,
          series: [
            {
              name: "庫存金額",
              type: "bar",
              data: this.daizhiY1,
            },
            {
              name: "呆滯",
              type: "bar",
              data: this.daizhiY2,
            },
            {
              name: "呆滯占比",
              type: "line",
              yAxisIndex: 1,
              data: this.daizhiY3,
              label: {
                show: true, // 柱头数字
                position: "top",
                formatter: "{c}%", //显示百分号
                textStyle: {
                  fontSize: "16",
                },
              },
            },
            {
              name: "目標",
              type: "line",
              yAxisIndex: 1,
              data: this.daizhiY4,
              markLine: {
                data: [{ type: "average", name: "平均值" }],
              },
            },
          ],
        };
        console.log(this.daizhiY1);
        chart.setOption(option);
        let img = new Image();
        img.src = chart.getDataURL({
          backgroundColor: "#FFFFFF",
        });
        this.base64Daizhiliao = img.src;
        console.log(this.base64Daizhiliao);
        this.daizhiX = [];
        this.daizhiY1 = [];
        this.daizhiY2 = [];
        this.daizhiY3 = [];
        this.daizhiY4 = [];
      }
    });
  }
  noshowEchartsDaizhi() {
    let a;
    a = document.getElementById("daizhiEchart").style.display = "none";
  }

  // delay原因分析
  download3() {
    // 下载接口 （后台记录下载次数等信息）
    this.axios
      .axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    // 请求下载的数据 月数据
    // debugger
    this.axios
      .axiosPost("QueryBaobiaoDelay", {
        starttime: this.startValue3,
        endtime: this.endValue3,
      })
      .then((data) => {
        console.log(data);
        this.delayList = data["order"];
        this.sheet1List = data["list"];
        if (this.delayList.length == 0) {
          alert("暫無數據");
        } else {
          this.delayList.sort((a, b) => {
            return a.month > b.month ? 1 : -1;
          });
          console.log(this.delayList);
          let time = [];
          // 人為漏失
          let renweilost = [];
          let sum1 = 0;
          // 人力不足
          let renli = [];
          let sum2 = 0;
          // 加工不良
          let jiagong = [];
          let sum3 = 0;
          // 缺料
          let queliao = [];
          let sum4 = 0;
          // 交期短
          let jiaoqi = [];
          let sum5 = 0;
          // 需求變更
          let xuqiu = [];
          let sum6 = 0;
          // 待需求單位提供資料
          let tigongzil = [];
          let sum7 = 0;
          // CNC產能不足
          let cnc = [];
          let sum8 = 0;
          // 待客戶驗證
          let waityangz = [];
          let sum9 = 0;
          time.push("項目");
          renweilost.push("人為漏失");
          renli.push("人力不足");
          jiagong.push("加工不良");
          queliao.push("缺料");
          jiaoqi.push("交期短");
          xuqiu.push("需求變更");
          tigongzil.push("待需求單位提供資料");
          cnc.push("CNC產能不足");
          waityangz.push("待客戶驗證");
          // debugger
          for (let j = 0; j < this.delayList.length; j++) {
            // 时间
            time.push(this.delayList[j].month_name);
            for (let i = 0; i < this.delayList[j]["data"].length; i++) {
              if (this.delayList[j]["data"][i].name == "人為漏失") {
                renweilost.push(this.delayList[j]["data"][i].count);
                sum1 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "人力不足") {
                renli.push(this.delayList[j]["data"][i].count);
                sum2 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "加工不良") {
                jiagong.push(this.delayList[j]["data"][i].count);
                sum3 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "缺料") {
                queliao.push(this.delayList[j]["data"][i].count);
                sum4 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "交期短") {
                jiaoqi.push(this.delayList[j]["data"][i].count);
                sum5 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "需求變更") {
                xuqiu.push(this.delayList[j]["data"][i].count);
                sum6 += this.delayList[j]["data"][i].count;
              } else if (
                this.delayList[j]["data"][i].name == "待需求單位提供資料"
              ) {
                tigongzil.push(this.delayList[j]["data"][i].count);
                sum7 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "CNC產能不足") {
                cnc.push(this.delayList[j]["data"][i].count);
                sum8 += this.delayList[j]["data"][i].count;
              } else if (this.delayList[j]["data"][i].name == "待客戶驗證") {
                waityangz.push(this.delayList[j]["data"][i].count);
                sum9 += this.delayList[j]["data"][i].count;
              }
            }
            let a = renweilost.length;
            let b = renli.length;
            let c = jiagong.length;
            let d = queliao.length;
            let e = jiaoqi.length;
            let f = xuqiu.length;
            let g = tigongzil.length;
            let h = cnc.length;
            let i = waityangz.length;
            // let max = Math.max(a, b, c, d, e, f, g, h, i);
            if (a < 13) {
              renweilost.push("");
            }
            if (b < 13) {
              renli.push("");
            }
            if (c < 13) {
              jiagong.push("");
            }
            if (d < 13) {
              queliao.push("");
            }
            if (e < 13) {
              jiaoqi.push("");
            }
            if (f < 13) {
              xuqiu.push("");
            }
            if (g < 13) {
              tigongzil.push("");
            }
            if (h < 13) {
              cnc.push("");
            }
            if (i < 13) {
              waityangz.push("");
            }
          }
          let sum =
            sum1 + sum2 + sum3 + sum4 + sum5 + sum6 + sum7 + sum8 + sum9;
          const sum12 = sum1 != 0 ? (sum1 / sum) * 100 : 0;
          const sum22 = sum2 != 0 ? (sum2 / sum) * 100 : 0;
          const sum32 = sum3 != 0 ? (sum3 / sum) * 100 : 0;
          const sum42 = sum4 != 0 ? (sum4 / sum) * 100 : 0;
          const sum52 = sum5 != 0 ? (sum5 / sum) * 100 : 0;
          const sum62 = sum6 != 0 ? (sum6 / sum) * 100 : 0;
          const sum72 = sum7 != 0 ? (sum7 / sum) * 100 : 0;
          const sum82 = sum8 != 0 ? (sum8 / sum) * 100 : 0;
          const sum92 = sum9 != 0 ? (sum9 / sum) * 100 : 0;
          console.log(sum);
          time.push("合計", "縂百分比");
          renweilost.push(sum1, sum12.toFixed(2) + "%");
          renli.push(sum2, sum22.toFixed(2) + "%");
          jiagong.push(sum3, sum32.toFixed(2) + "%");
          queliao.push(sum4, sum42.toFixed(2) + "%");
          jiaoqi.push(sum5, sum52.toFixed(2) + "%");
          xuqiu.push(sum6, sum62.toFixed(2) + "%");
          tigongzil.push(sum7, sum72.toFixed(2) + "%");
          cnc.push(sum8, sum82.toFixed(2) + "%");
          waityangz.push(sum9, sum92.toFixed(2) + "%");

          this.exportlistDely.push(time);
          this.exportlistDely.push(renweilost);
          this.exportlistDely.push(renli);
          this.exportlistDely.push(jiagong);
          this.exportlistDely.push(queliao);
          this.exportlistDely.push(jiaoqi);
          this.exportlistDely.push(xuqiu);
          this.exportlistDely.push(tigongzil);
          this.exportlistDely.push(cnc);
          this.exportlistDely.push(waityangz);
          console.log(this.exportlistDely);
          // 下载报表
          this.downsheetList = [];
          if (this.sheet1List.length != 0) {
            this.sheet1List.forEach((row: any) => {
              this.downsheetList.push(Object.values(row));
            });
            let head = [
              "申請日期",
              "治具交期",
              "申請人",
              "charge部門",
              "工聯單號",
              "設計",
              "CNC加工",
              "二次加工",
              "組裝調試",
            ];
            this.sheetdata = {
              title: "Delay原因分析",
              data: this.downsheetList,
              headers: head,
            };
          } else {
            let head = [
              "申請日期",
              "治具交期",
              "申請人",
              "charge部門",
              "工聯單號",
              "設計",
              "CNC加工",
              "二次加工",
              "組裝調試",
            ];
            this.sheetdata = {
              title: "Delay原因分析",
              data: ["", "", "", "", "", "", "", "", ""],
              headers: head,
            };
          }
          this.reportData = {
            title: "Delay原因分析",
            data: this.exportlistDely,
          };
          this.excel.exportExcel7(this.reportData, this.sheetdata);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    this.exportlistDely = [];
    this.downsheetList = [];
  }

  // 治具OTD
  download5() {
    // 下载接口 （后台记录下载次数等信息）
    this.axios
      .axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    this.axios
      .axiosPost("QueryBaobiaoOTD", { starttime: "2020-09-01" })
      .then((data) => {
        console.log(data);
        this.OTDList = data["order"];
        console.log(this.OTDList);
        if (this.OTDList.length == 0) {
          alert("暫無數據");
        } else {
          // debugger
          let time = [];
          let OK = [];
          let Delay = [];
          let Otd = [];
          let Target = [];
          time.push("項目");
          OK.push("如期交貨");
          Delay.push("Delay");
          Otd.push("OTD");
          Target.push("目標");
          // debugger
          for (let i = 0; i < this.OTDList.length; i++) {
            if (this.OTDList[i].data.length == 0) {
              time.push(this.OTDList[i].month_name);
              OK.push(this.OTDList[i].ok);
              Delay.push(this.OTDList[i].delay);
              Otd.push(
                (this.OTDList[i].ok == 0
                  ? 0
                  : (
                    (this.OTDList[i].ok /
                      (this.OTDList[i].ok + this.OTDList[i].delay)) *
                    100
                  ).toFixed(2)) + "%"
              );
              Target.push(this.Target);

              this.otdX.push(this.OTDList[i].month_name);
              this.otdY1.push(
                this.OTDList[i].ok == 0
                  ? 0
                  : Number(
                    (
                      (this.OTDList[i].ok /
                        (this.OTDList[i].ok + this.OTDList[i].delay)) *
                      100
                    ).toFixed(2)
                  )
              );
              this.otdY2.push(this.TargetY);
            } else {
              for (let j = 0; j < this.OTDList[i]["data"].length; j++) {
                time.push(this.OTDList[i]["data"][j].range);
                OK.push(this.OTDList[i]["data"][j].ok);
                Delay.push(this.OTDList[i]["data"][j].delay);
                Otd.push(
                  (this.OTDList[i].data[j].ok == 0
                    ? 0
                    : (
                      (this.OTDList[i].data[j].ok /
                        (this.OTDList[i].data[j].ok +
                          this.OTDList[i].data[j].delay)) *
                      100
                    ).toFixed(2)) + "%"
                );
                Target.push(this.Target);

                this.otdX.push(this.OTDList[i]["data"][j].range);
                this.otdY1.push(
                  this.OTDList[i].data[j].ok == 0
                    ? 0
                    : Number(
                      (
                        (this.OTDList[i].data[j].ok /
                          (this.OTDList[i].data[j].ok +
                            this.OTDList[i].data[j].delay)) *
                        100
                      ).toFixed(2)
                    )
                );
                this.otdY2.push(this.TargetY);
              }
            }
          }
          this.exportlist2.push(time);
          this.exportlist2.push(OK);
          this.exportlist2.push(Delay);
          this.exportlist2.push(Otd);
          this.exportlist2.push(Target);
          console.log(this.exportlist2);
          // 获取base64
          const chart = echarts.init(document.getElementById("otd"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            legend: {
              data: ["OTD", "目標"],
              top: 20,
              itemGap: 80,
              textStyle: {
                // color: '#000000',
                fontSize: 16,
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: this.otdX,
                axisPointer: {
                  type: "shadow",
                },
                axisLabel: {
                  interval: 0, //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
                  rotate: 30, //倾斜度 -90 至 90 默认为0
                  //  字体颜色
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} %",
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            animation: false,
            series: [
              {
                name: "OTD",
                type: "line",
                data: this.otdY1,
                label: {
                  show: true, // 柱头数字
                  position: "top",
                  formatter: "{c}%", //显示百分号
                  textStyle: {
                    fontSize: "16",
                  },
                },
              },
              {
                name: "目標",
                type: "line",
                data: this.otdY2,
                markLine: {
                  data: [{ type: "average", name: "平均值" }],
                },
              },
            ],
          };
          chart.setOption(option);
          let img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.OTDbase64 = img.src;

          this.exportlist2.forEach((row: any) => {
            this.downOTDList.push(Object.values(row));
          });
          let reportData = {
            title: "治具OTD",
            data: this.downOTDList,
          };
          this.excel.exportExcel5("治具OTD", reportData, this.OTDbase64);
          this.exportlist2 = [];
          this.otdX = [];
          this.otdY1 = [];
          this.otdY2 = [];
          this.downOTDList = [];
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // 绘制echarts
  showEchartsOTD(otd) {
    this.axios
      .axiosPost("QueryBaobiaoOTD", { starttime: "2020-09-01" })
      .then((data) => {
        console.log(data);
        this.OTDList = data["order"];
        console.log(this.OTDList);
        if (this.OTDList.length == 0) {
          alert("暫無數據");
        } else {
          for (let i = 0; i < this.OTDList.length; i++) {
            if (this.OTDList[i].data.length == 0) {
              this.otdX.push(this.OTDList[i].month_name);
              this.otdY1.push(
                this.OTDList[i].ok == 0
                  ? 0
                  : Number(
                    (
                      (this.OTDList[i].ok /
                        (this.OTDList[i].ok + this.OTDList[i].delay)) *
                      100
                    ).toFixed(2)
                  )
              );
              this.otdY2.push(this.TargetY);
            } else {
              for (let j = 0; j < this.OTDList[i]["data"].length; j++) {
                this.otdX.push(this.OTDList[i]["data"][j].range);
                this.otdY1.push(
                  this.OTDList[i].data[j].ok == 0
                    ? 0
                    : Number(
                      (
                        (this.OTDList[i].data[j].ok /
                          (this.OTDList[i].data[j].ok +
                            this.OTDList[i].data[j].delay)) *
                        100
                      ).toFixed(2)
                    )
                );
                this.otdY2.push(this.TargetY);
              }
            }
          }
          console.log(this.otdX);
          console.log(this.otdY1);
          console.log(this.otdY2);
          if (otd == true) {
            let a;
            a = document.getElementById("otdEchart").style.display = "block";
          }
          const chart = echarts.init(document.getElementById("otd"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            legend: {
              data: ["OTD", "目標"],
              top: 20,
              itemGap: 80,
              textStyle: {
                // color: '#000000',
                fontSize: 16,
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: this.otdX,
                axisPointer: {
                  type: "shadow",
                },
                axisLabel: {
                  interval: 0, //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
                  rotate: 30, //倾斜度 -90 至 90 默认为0
                  //  字体颜色
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} %",
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            animation: false,
            series: [
              {
                name: "OTD",
                type: "line",
                data: this.otdY1,
                label: {
                  show: true, // 柱头数字
                  position: "top",
                  formatter: "{c}%", //显示百分号
                  textStyle: {
                    fontSize: "16",
                  },
                },
              },
              {
                name: "目標",
                type: "line",
                data: this.otdY2,
                markLine: {
                  data: [{ type: "average", name: "平均值" }],
                },
              },
            ],
          };
          chart.setOption(option);
          let img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.OTDbase64 = img.src;
          this.otdX = [];
          this.otdY1 = [];
          this.otdY2 = [];
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  noshowEchartsOTD() {
    let a;
    a = document.getElementById("otdEchart").style.display = "none";
  }

  // 净利潤
  download6() {
    let time = [];
    let yunying = [];
    let wuliao = [];
    let zhichu = [];
    let yingye = [];
    let lirun = [];
    time.push("");
    yunying.push("運營成本");
    wuliao.push("物料成本");
    zhichu.push("支出");
    yingye.push("營業收入");
    lirun.push("純利潤");
    // 下载接口 （后台记录下载次数等信息）
    this.axios
      .axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    // 请求数据
    this.axios
      .axiosPost("QueryBaobiaoBenefit", { starttime: "2020-09-01" })
      .then((data) => {
        console.log(data);
        if (data["order"].length == 0) {
          alert("暫無數據");
        } else {
          this.benefitList = data["order"];
          console.log(this.benefitList);
          this.benefitSheet2 = data["mingxi"];
          console.log(this.benefitSheet2);
          this.benefitSheet3 = data["mingxi2"];
          console.log(this.benefitSheet3);
          for (let i = 0; i < this.benefitList.length; i++) {
            if (this.benefitList[i].data.length != 0) {
              for (let j = 0; j < this.benefitList[i].data.length; j++) {
                time.push(this.benefitList[i].data[j].range);
                yunying.push(this.benefitList[i].data[j].yunying);
                wuliao.push(
                  Number(this.benefitList[i].data[j].cailiaofei) +
                  Number(this.benefitList[i].data[j].daojuhaocai)
                );
                zhichu.push(this.benefitList[i].data[j].zhichu);
                yingye.push(Number(this.benefitList[i].data[j].yingyee));
                lirun.push(this.benefitList[i].data[j].chunlirun);

                this.benefitX.push(this.benefitList[i].data[j].range);
                this.yunyingY.push(this.benefitList[i].data[j].yunying);
                this.wuliaoY.push(
                  Number(this.benefitList[i].data[j].cailiaofei) +
                  Number(this.benefitList[i].data[j].daojuhaocai)
                );
                this.zhichuY.push(this.benefitList[i].data[j].zhichu);
                this.yingyeeY.push(Number(this.benefitList[i].data[j].yingyee));
                this.chunlirunY.push(this.benefitList[i].data[j].chunlirun);
              }
            } else {
              time.push(this.benefitList[i].month_name);
              yunying.push(this.benefitList[i].yunying);
              wuliao.push(
                Number(this.benefitList[i].cailiaofei) +
                Number(this.benefitList[i].daojuhaocai)
              );
              zhichu.push(Number(this.benefitList[i].zhichu));
              yingye.push(Number(this.benefitList[i].yingyee));
              lirun.push(Number(this.benefitList[i].chunlirun));

              this.benefitX.push(this.benefitList[i].month_name);
              this.yunyingY.push(this.benefitList[i].yunying);
              this.wuliaoY.push(
                Number(this.benefitList[i].cailiaofei) +
                Number(this.benefitList[i].daojuhaocai)
              );
              this.zhichuY.push(Number(this.benefitList[i].zhichu));
              this.yingyeeY.push(Number(this.benefitList[i].yingyee));
              this.chunlirunY.push(Number(this.benefitList[i].chunlirun));
            }
          }
        }
        this.exportlist3.push(time);
        this.exportlist3.push(yunying);
        this.exportlist3.push(wuliao);
        this.exportlist3.push(zhichu);
        this.exportlist3.push(yingye);
        this.exportlist3.push(lirun);
        console.log(this.exportlist3);
        let reportData = {
          title: "淨利潤(週)",
          data: this.exportlist3,
        };
        const chart = echarts.init(document.getElementById("benefit"));
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          legend: {
            data: ["運營成本", "物料成本", "支出", "營業收入", "純利潤"],
            top: 20,
            itemGap: 80,
            textStyle: {
              // color: '#000000',
              fontSize: 16,
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.benefitX,
              axisPointer: {
                type: "shadow",
              },
              axisLabel: {
                //  字体颜色
                show: true,
                textStyle: { fontSize: 18 },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                //  字体颜色
                show: true,
                textStyle: { fontSize: 18 },
              },
            },
          ],
          animation: false,
          series: [
            {
              name: "運營成本",
              type: "bar",
              stack: "成本",
              emphasis: {
                focus: "series",
              },
              data: this.yunyingY,
            },
            {
              name: "物料成本",
              type: "bar",
              stack: "成本",
              emphasis: {
                focus: "series",
              },
              data: this.wuliaoY,
            },
            {
              name: "支出",
              type: "line",
              symbol: "star", //拐点样式
              symbolSize: 8, //拐点大小
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 3, //折线宽度
                    // color:"#FF0000"//折线颜色
                  },
                },
              },
              data: this.zhichuY,
            },
            {
              name: "營業收入",
              type: "line",
              symbol: "diamond", //拐点样式
              symbolSize: 8, //拐点大小
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 3, //折线宽度
                    // color:"#FF0000"//折线颜色
                  },
                },
              },
              data: this.yingyeeY,
            },
            {
              name: "純利潤",
              type: "line",
              symbol: "triangle", //拐点样式
              symbolSize: 8, //拐点大小
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 3, //折线宽度
                    // color:"#FF0000"//折线颜色
                  },
                },
              },
              data: this.chunlirunY,
            },
          ],
        };
        chart.setOption(option);
        let img = new Image();
        img.src = chart.getDataURL({
          backgroundColor: "#FFFFFF",
        });
        this.benefitiBase64 = img.src;
        // sheet2
        this.downBenefitSheet2 = [];
        this.benefitSheet2.forEach((row: any) => {
          this.downBenefitSheet2.push(Object.values(row));
        });
        let head = [
          "結單日期",
          "單據號",
          "治具名稱",
          "治具數量",
          "申請人",
          "廠區",
          "費用charge部門",
          "TTL工時",
          "材料費用",
          "單價",
          "總價",
        ];
        let benefitsheet2 = {
          title: "已經結單明細",
          data: this.downBenefitSheet2,
          headers: head,
        };
        // sheet3
        // if(this.benefitSheet3.length !=0){
        this.downBenefitSheet3 = [];
        this.benefitSheet3.forEach((row: any) => {
          this.downBenefitSheet3.push(Object.values(row));
        });
        let head3 = [
          "結單日期",
          "工聯單號",
          "治具名稱",
          "治具數量",
          "申請人",
          "廠區",
          "費用charge部門",
          "單價",
          "總價",
        ];
        this.benefitsheet3 = {
          title: "進行中單據",
          data: this.downBenefitSheet3,
          headers: head3,
        };
        // } else {
        //   let head3 = ['結單日期', '單據號', '治具名稱', '治具數量', '申請人', '廠區', '費用charge部門', 'TTL工時', '材料費用', '單價', '總價'];
        //   this.benefitsheet3 = {
        //     headers: head3,
        //     data:['', '', '', '', '', '', '', '', '', '', '']
        //   }
        // }
        this.excel.exportExcel6(
          reportData,
          this.benefitiBase64,
          benefitsheet2,
          this.benefitsheet3
        );
        this.exportlist3 = [];
        this.downBenefitSheet2 = [];
        this.downBenefitSheet3 = [];
        this.benefitX = [];
        this.yunyingY = [];
        this.wuliaoY = [];
        this.zhichuY = [];
        this.yingyeeY = [];
        this.chunlirunY = [];
      })
      .catch((err) => {
        console.log(err);
      });
  }
  showEcharts6() {
    this.axios
      .axiosPost("QueryBaobiaoBenefit", { starttime: "2020-09-01" })
      .then((data) => {
        console.log(data);
        if (data["order"].length == 0) {
          alert("暫無數據");
        } else {
          this.benefitList = data["order"];
          console.log(this.benefitList);
          for (let i = 0; i < this.benefitList.length; i++) {
            if (this.benefitList[i].data.length != 0) {
              for (let j = 0; j < this.benefitList[i].data.length; j++) {
                this.benefitX.push(this.benefitList[i].data[j].range);
                this.yunyingY.push(this.benefitList[i].data[j].yunying);
                this.wuliaoY.push(
                  Number(this.benefitList[i].data[j].cailiaofei) +
                  Number(this.benefitList[i].data[j].daojuhaocai)
                );
                this.zhichuY.push(this.benefitList[i].data[j].zhichu);
                this.yingyeeY.push(Number(this.benefitList[i].data[j].yingyee));
                this.chunlirunY.push(this.benefitList[i].data[j].chunlirun);
              }
            } else {
              this.benefitX.push(this.benefitList[i].month_name);
              this.yunyingY.push(this.benefitList[i].yunying);
              this.wuliaoY.push(
                Number(this.benefitList[i].cailiaofei) +
                Number(this.benefitList[i].daojuhaocai)
              );
              this.zhichuY.push(Number(this.benefitList[i].zhichu));
              this.yingyeeY.push(Number(this.benefitList[i].yingyee));
              this.chunlirunY.push(Number(this.benefitList[i].chunlirun));
            }
          }
          let a;
          a = document.getElementById("benefitEchart").style.display = "block";
          const chart = echarts.init(document.getElementById("benefit"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            legend: {
              data: ["運營成本", "物料成本", "支出", "營業收入", "純利潤"],
              top: 20,
              itemGap: 80,
              textStyle: {
                // color: '#000000',
                fontSize: 16,
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.benefitX,
                axisPointer: {
                  type: "shadow",
                },
                axisLabel: {
                  //  字体颜色
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  //  字体颜色
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            animation: false,
            series: [
              {
                name: "運營成本",
                type: "bar",
                stack: "成本",
                emphasis: {
                  focus: "series",
                },
                data: this.yunyingY,
              },
              {
                name: "物料成本",
                type: "bar",
                stack: "成本",
                emphasis: {
                  focus: "series",
                },
                data: this.wuliaoY,
              },
              {
                name: "支出",
                type: "line",
                symbol: "star", //拐点样式
                symbolSize: 8, //拐点大小
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 3, //折线宽度
                      // color:"#FF0000"//折线颜色
                    },
                  },
                },
                data: this.zhichuY,
              },
              {
                name: "營業收入",
                type: "line",
                symbol: "diamond", //拐点样式
                symbolSize: 8, //拐点大小
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 3, //折线宽度
                      // color:"#FF0000"//折线颜色
                    },
                  },
                },
                data: this.yingyeeY,
              },
              {
                name: "純利潤",
                type: "line",
                symbol: "triangle", //拐点样式
                symbolSize: 8, //拐点大小
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 3, //折线宽度
                      // color:"#FF0000"//折线颜色
                    },
                  },
                },
                data: this.chunlirunY,
              },
            ],
          };
          chart.setOption(option);
          let img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.benefitiBase64 = img.src;
          console.log(this.benefitiBase64);
          this.benefitX = [];
          this.yunyingY = [];
          this.wuliaoY = [];
          this.zhichuY = [];
          this.yingyeeY = [];
          this.chunlirunY = [];
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  noshowEcharts6() {
    let a;
    a = document.getElementById("benefitEchart").style.display = "none";
  }

  // 各厂效益
  download7() {
    let time = [];
    let cost;
    let costName = [];
    let total = [];
    time.push("Plant");
    total.push("總計");
    // 下载接口 （后台记录下载次数等信息）
    this.axios
      .axiosPost("AddDownloadCount")
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    // 请求数据
    // debugger
    this.axios
      .axiosPost("QueryBaobiaoBenefitPerFactory", { starttime: "2020-09-01" })
      .then((data) => {
        console.log(data);
        if (data["order"].length == 0) {
          alert("暫無數據");
        } else {
          this.factory = data["order"];
          this.xiaoyiSheet2 = data["mingxi"];
          console.log(this.factory);
          for (let a = 0; a < data["factory"].length; a++) {
            cost = data["factory"][a];
            costName.push(cost.split(","));
          }
          console.log(costName);
          for (let i = 0; i < this.factory.length; i++) {
            if (this.factory[i].data.length != 0) {
              for (let j = 0; j < this.factory[i].data.length; j++) {
                time.push(this.factory[i].data[j].range);
                total.push(this.factory[i].data[j].total);
                for (
                  let b = 0;
                  b < this.factory[i].data[j].factory.length;
                  b++
                ) {
                  for (let a = 0; a < costName.length; a++) {
                    if (
                      this.factory[i].data[j].factory[b].name == costName[a][0]
                    ) {
                      costName[a].push(this.factory[i].data[j].factory[b].cost);
                    }
                  }

                  if (this.factory[i].data[j].factory[b].name == "WEKS(P3)") {
                    this.WEKSP3.push(this.factory[i].data[j].factory[b].cost);
                  } else if (
                    this.factory[i].data[j].factory[b].name == "WAKS(P1)"
                  ) {
                    this.WAKSP1.push(this.factory[i].data[j].factory[b].cost);
                  } else if (
                    this.factory[i].data[j].factory[b].name == "WAKS(P5)"
                  ) {
                    this.WAKSP5.push(this.factory[i].data[j].factory[b].cost);
                  } else if (
                    this.factory[i].data[j].factory[b].name == "WAKS(6A)"
                  ) {
                    this.WAKS6A.push(this.factory[i].data[j].factory[b].cost);
                  } else if (
                    this.factory[i].data[j].factory[b].name == "WAKS(6B)"
                  ) {
                    this.WAKS6B.push(this.factory[i].data[j].factory[b].cost);
                  } else {
                    this.WAKSSite.push(this.factory[i].data[j].factory[b].cost);
                  }
                }
              }
            } else {
              time.push(this.factory[i].month_name);
              total.push(this.factory[i].total);
              for (let j = 0; j < this.factory[i].factory.length; j++) {
                for (let a = 0; a < costName.length; a++) {
                  if (this.factory[i].factory[j].name == costName[a][0]) {
                    costName[a].push(this.factory[i].factory[j].cost);
                  }
                }
                if (this.factory[i].factory[j].name == "WEKS(P3)") {
                  this.WEKSP3.push(this.factory[i].factory[j].cost);
                } else if (this.factory[i].factory[j].name == "WAKS(P1)") {
                  this.WAKSP1.push(this.factory[i].factory[j].cost);
                } else if (this.factory[i].factory[j].name == "WAKS(P5)") {
                  this.WAKSP5.push(this.factory[i].factory[j].cost);
                } else if (this.factory[i].factory[j].name == "WAKS(6A)") {
                  this.WAKS6A.push(this.factory[i].factory[j].cost);
                } else if (this.factory[i].factory[j].name == "WAKS(6B)") {
                  this.WAKS6B.push(this.factory[i].factory[j].cost);
                } else {
                  this.WAKSSite.push(this.factory[i].factory[j].cost);
                }
              }
            }
          }
          this.xiaoyiX = time;
          console.log(costName);
          this.exportList4.push(time);
          for (let i = 0; i < costName.length; i++) {
            this.exportList4.push(costName[i]);
          }
          this.exportList4.push(total);
          console.log(this.exportList4);
          let reportData = {
            title: "各廠效益",
            data: this.exportList4,
          };
          const chart = echarts.init(document.getElementById("xiaoyi"));
          const option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            legend: {
              data: [
                "WEKS(P3)",
                "WAKS(P1)",
                "WAKS(P5)",
                "WAKS(6A)",
                "WAKS(6B)",
                "其他",
              ],
              top: 20,
              itemGap: 80,
              textStyle: {
                // color: '#000000',
                fontSize: 16,
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.xiaoyiX,
                axisLabel: {
                  //  字体颜色
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  //  字体颜色
                  show: true,
                  textStyle: { fontSize: 18 },
                },
              },
            ],
            animation: false,
            series: [
              {
                name: "WEKS(P3)",
                type: "bar",
                stack: "廠別",
                emphasis: {
                  focus: "series",
                },
                data: this.WEKSP3,
              },
              {
                name: "WAKS(P1)",
                type: "bar",
                stack: "廠別",
                emphasis: {
                  focus: "series",
                },
                data: this.WAKSP1,
              },
              {
                name: "WAKS(P5)",
                type: "bar",
                stack: "廠別",
                emphasis: {
                  focus: "series",
                },
                data: this.WAKSP5,
              },
              {
                name: "WAKS(6A)",
                type: "bar",
                stack: "廠別",
                emphasis: {
                  focus: "series",
                },
                data: this.WAKS6A,
              },
              {
                name: "WAKS(6B)",
                type: "bar",
                stack: "廠別",
                emphasis: {
                  focus: "series",
                },
                data: this.WAKS6B,
              },
              {
                name: "其他",
                type: "bar",
                stack: "廠別",
                emphasis: {
                  focus: "series",
                },
                data: this.WAKSSite,
              },
            ],
          };
          chart.setOption(option);
          let img = new Image();
          img.src = chart.getDataURL({
            backgroundColor: "#FFFFFF",
          });
          this.xiaoyiBase64 = img.src;
          // sheet2表
          this.downXiaoyiSheet2 = [];
          this.xiaoyiSheet2.forEach((row: any) => {
            this.downXiaoyiSheet2.push(Object.values(row));
          });
          let head = [
            "結單日期",
            "單據號",
            "治具名稱",
            "治具數量",
            "申請人",
            "廠區",
            "費用charge部門",
            "TTL工時",
            "材料費用",
            "單價",
            "總價",
          ];
          let xiaoyiList = {
            title: "明細説明",
            data: this.downXiaoyiSheet2,
            headers: head,
          };
          this.excel.exportExcel8(reportData, this.xiaoyiBase64, xiaoyiList);
          this.exportList4 = [];
          this.downXiaoyiSheet2 = [];
          this.xiaoyiX = [];
          this.WAKS6A = []; // WAKS(6A)
          this.WAKS6B = []; // WAKS(6B)
          this.WAKSP1 = []; // WAKS(P1)
          this.WAKSP5 = []; // WAKS(P5)
          this.WEKSP3 = []; // WEKS(P3)
          this.WAKSSite = []; // WAKS(Site)
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // 获取Echart图的X轴和Y轴数据
  showEcharts7(gechangxiaoyi: Boolean) {
    let time = [];
    this.axios
      .axiosPost("QueryBaobiaoBenefitPerFactory", { starttime: "2020-09-01" })
      .then((data) => {
        console.log(data);
        this.factory = data["order"];
        console.log(this.factory);
        for (let i = 0; i < this.factory.length; i++) {
          if (this.factory[i].data.length != 0) {
            for (let j = 0; j < this.factory[i].data.length; j++) {
              time.push(this.factory[i].data[j].range);
              for (let b = 0; b < this.factory[i].data[j].factory.length; b++) {
                if (this.factory[i].data[j].factory[b].name == "WEKS(P3)") {
                  this.WEKSP3.push(this.factory[i].data[j].factory[b].cost);
                } else if (
                  this.factory[i].data[j].factory[b].name == "WAKS(P1)"
                ) {
                  this.WAKSP1.push(this.factory[i].data[j].factory[b].cost);
                } else if (
                  this.factory[i].data[j].factory[b].name == "WAKS(P5)"
                ) {
                  this.WAKSP5.push(this.factory[i].data[j].factory[b].cost);
                } else if (
                  this.factory[i].data[j].factory[b].name == "WAKS(6A)"
                ) {
                  this.WAKS6A.push(this.factory[i].data[j].factory[b].cost);
                } else if (
                  this.factory[i].data[j].factory[b].name == "WAKS(6B)"
                ) {
                  this.WAKS6B.push(this.factory[i].data[j].factory[b].cost);
                } else {
                  this.WAKSSite.push(this.factory[i].data[j].factory[b].cost);
                }
              }
            }
          } else {
            time.push(this.factory[i].month_name);
            for (let j = 0; j < this.factory[i].factory.length; j++) {
              if (this.factory[i].factory[j].name == "WEKS(P3)") {
                this.WEKSP3.push(this.factory[i].factory[j].cost);
              } else if (this.factory[i].factory[j].name == "WAKS(P1)") {
                this.WAKSP1.push(this.factory[i].factory[j].cost);
              } else if (this.factory[i].factory[j].name == "WAKS(P5)") {
                this.WAKSP5.push(this.factory[i].factory[j].cost);
              } else if (this.factory[i].factory[j].name == "WAKS(6A)") {
                this.WAKS6A.push(this.factory[i].factory[j].cost);
              } else if (this.factory[i].factory[j].name == "WAKS(6B)") {
                this.WAKS6B.push(this.factory[i].factory[j].cost);
              } else {
                this.WAKSSite.push(this.factory[i].factory[j].cost);
              }
            }
          }
        }
        this.xiaoyiX = time;
        console.log(this.xiaoyiX);
        if (gechangxiaoyi) {
          let a;
          a = document.getElementById("xiaoyiEchart").style.display = "block";
        }
        const chart = echarts.init(document.getElementById("xiaoyi"));
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            data: [
              "WEKS(P3)",
              "WAKS(P1)",
              "WAKS(P5)",
              "WAKS(6A)",
              "WAKS(6B)",
              "其他",
            ],
            top: 20,
            itemGap: 80,
            textStyle: {
              // color: '#000000',
              fontSize: 16,
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.xiaoyiX,
              axisLabel: {
                //  字体颜色
                show: true,
                textStyle: { fontSize: 18 },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                //  字体颜色
                show: true,
                textStyle: { fontSize: 18 },
              },
            },
          ],
          animation: false,
          series: [
            {
              name: "WEKS(P3)",
              type: "bar",
              stack: "廠別",
              emphasis: {
                focus: "series",
              },
              data: this.WEKSP3,
            },
            {
              name: "WAKS(P1)",
              type: "bar",
              stack: "廠別",
              emphasis: {
                focus: "series",
              },
              data: this.WAKSP1,
            },
            {
              name: "WAKS(P5)",
              type: "bar",
              stack: "廠別",
              emphasis: {
                focus: "series",
              },
              data: this.WAKSP5,
            },
            {
              name: "WAKS(6A)",
              type: "bar",
              stack: "廠別",
              emphasis: {
                focus: "series",
              },
              data: this.WAKS6A,
            },
            {
              name: "WAKS(6B)",
              type: "bar",
              stack: "廠別",
              emphasis: {
                focus: "series",
              },
              data: this.WAKS6B,
            },
            {
              name: "其他",
              type: "bar",
              stack: "廠別",
              emphasis: {
                focus: "series",
              },
              data: this.WAKSSite,
            },
          ],
        };
        chart.setOption(option);
        let img = new Image();
        img.src = chart.getDataURL({
          backgroundColor: "#FFFFFF",
        });
        this.xiaoyiBase64 = img.src;
        this.xiaoyiX = [];
        this.WAKS6A = []; // WAKS(6A)
        this.WAKS6B = []; // WAKS(6B)
        this.WAKSP1 = []; // WAKS(P1)
        this.WAKSP5 = []; // WAKS(P5)
        this.WEKSP3 = []; // WEKS(P3)
        this.WAKSSite = []; // WAKS(Site)
      });
  }
  noshowEcharts7() {
    let a;
    a = document.getElementById("xiaoyiEchart").style.display = "none";
  }

  // 去重
  unique(arr: any) {
    let array = [];
    for (let i = 0; i < arr.length; i++) {
      if (array.indexOf(arr[i]) === -1) {
        array.push(arr[i]);
      }
    }
    return array;
  }

  // 人工工時選擇時間
  StartChange(date: Date): void {
    this.startValue = date;
    this.startValue = this.datePipe.transform(this.startValue, "yyyy-MM-dd");
    console.log(this.startValue);
  }
  EndChange(date: Date): void {
    this.endValue = date;
    this.endValue = this.datePipe.transform(this.endValue, "yyyy-MM-dd");
    console.log(this.endValue);
  }
  // 治具校驗(總檢)選擇時間
  StartChange1(date: Date): void {
    this.startValue1 = date;
    this.startValue1 = this.datePipe.transform(this.startValue1, "yyyy-MM-dd");
    console.log(this.startValue1);
  }
  EndChange1(date: Date): void {
    this.endValue1 = date;
    this.endValue1 = this.datePipe.transform(this.endValue1, "yyyy-MM-dd");
    console.log(this.endValue1);
  }
  // 治具校驗(品質檢驗)選擇時間
  StartChange2(date: Date): void {
    this.startValue2 = date;
    this.startValue2 = this.datePipe.transform(this.startValue2, "yyyy-MM-dd");
    console.log(this.startValue2);
  }
  EndChange2(date: Date): void {
    this.endValue2 = date;
    this.endValue2 = this.datePipe.transform(this.endValue2, "yyyy-MM-dd");
    console.log(this.endValue2);
  }
  // Delay原因分析選擇時間
  StartChange3(date: Date): void {
    this.startValue3 = date;
    this.startValue3 = this.datePipe.transform(this.startValue3, "yyyy-MM");
    console.log(this.startValue3);
  }
  EndChange3(date: Date): void {
    this.endValue3 = date;
    this.endValue3 = this.datePipe.transform(this.endValue3, "yyyy-MM");
    console.log(this.endValue3);
  }
}
